<template>
  <div class="areaTip" ref="areaTip">
    <div class="logo" :style="{backgroundImage: `url(${areaInfo.logo})`}"></div>
    <div class="label">
      <div>{{areaInfo.name}}</div>
      <div>{{areaInfo.floorName}}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    areaInfo: Object,
    movePos: Object
  },
  data() {
    return {};
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {
    // 根据传入的pos位置坐标移动
    movePos(newPos) {
      if (this.$refs.areaTip) {
        this.$refs.areaTip.style.left = `${newPos.x -
          130 / window.devicePixelRatio}px`;
        this.$refs.areaTip.style.top = `${newPos.y -
          300 / window.devicePixelRatio}px`;
      }
    }
  },
  methods: {},
  components: {}
};
</script>

<style scoped lang='less'>
.areaTip {
  position: absolute;
  width: 260px;
  height: 140px;
  background-color: #8b5d33;
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
  border-radius: 12px;
  display: flex;
  align-items: center;
  &::after {
    content: "";
    position: absolute;
    bottom: -28px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-width: 15px;
    border-style: solid;
    border-color: #8b5d33 transparent transparent transparent;
  }
  .logo {
    margin-left: 15px;
    width: 88px;
    height: 88px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    box-shadow: 0px 0px 5px 0px rgba(173, 143, 108, 0.29);
  }
  .label {
    div {
      text-overflow: ellipsis;
      overflow: hidden;
      margin-left: 15px;
      color: #ffd397;
      &:nth-child(1) {
        height: 38px;
        font-size: 30px;
        line-height: 38px;
      }
      &:nth-child(2) {
        margin-top: 15px;
        height: 25px;
        font-size: 18px;
        line-height: 25px;
      }
    }
  }
}
</style>
